<template>
  <div>
    <div class="ba_f outmain">
      <el-tabs v-model="activeName1" type="card" @tab-click="handleTabClick">
        <el-tab-pane label="外卖订单概况" name="wmddgk"></el-tab-pane>
        <el-tab-pane label="外卖支付概况" name="wmzfgk"></el-tab-pane>
        <el-tab-pane label="外卖商品概况" name="wmspgk"></el-tab-pane>
      </el-tabs>
      <div class="shuju_title mar_t20">
        <div class="shuju_title_text">
          <span>商品概况</span>
        </div>
      </div>
      <div class="main-icon flex t_l mar_t20">
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">商品总数</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ jeData.allGoods || 0 }}</p>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">已上架商品</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ jeData.onGoods || 0 }}</p>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="title6 fon_14">已下架商品</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ jeData.downGoods || 0 }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mar_t20 ba_f pad_20">
      <div class="shuju_title">
        <div class="shuju_title_text">
          <span>商品排行</span>
        </div>
      </div>
      <div class="pad_20 flex-bet flex-y-top">
        <el-form :inline="true" :model="formInline" style="width: 100%;">
              <el-form-item label="排行类型：">
                <el-select v-model="formInline.type" placeholder="请选择" @change="selectType">
                  <el-option v-for="item in lyOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="查询日期：" class="mar_l20">
                <div class="flex-bet">
                  <div>
                    <el-radio-group v-model="formInline.timeType" @change="selectType">
                      <el-radio-button label="1">今天</el-radio-button>
                      <el-radio-button label="2">近七天</el-radio-button>
                      <el-radio-button label="3">近十五天</el-radio-button>
                      <el-radio-button label="4">自定义时间</el-radio-button>
                    </el-radio-group>
                    <span class="mar_l20" v-if="formInline.timeType=='4'">
                  <el-date-picker v-model="formInline.time" type="daterange" range-separator="至" start-placeholder="开始日期"
                                  end-placeholder="结束日期" format="yyyy年MM月dd日" :picker-options="pickerOptions" @change="selectType"></el-date-picker>
                </span>
                  </div>
                </div>
              </el-form-item>
              <div class="flex ba_f">
                <el-form-item label="商品导出：">
                  <a :href="handelExport()" class="mar_l10"><el-button  size="medium" type="primary">导出商品</el-button></a>
                </el-form-item>
              </div>
        </el-form>
      </div>
      <div class="flex-g-1 mar_r20">
        <div class="mar_t10 shuju_table">
          <el-table
              :data="tableData2"
              style="width: 100%">
            <el-table-column
                type="index"
                label="排名"
                width="300"
            >
            </el-table-column>
            >
            <el-table-column
                prop="categoryName"
                label="商品分类"
            >
            </el-table-column>
            <el-table-column
                prop="name"
                label="商品名称"
            >
            </el-table-column>
            >
<!--            <el-table-column-->
<!--                prop="oldMoney"-->
<!--                label="商品原价"-->
<!--            >-->
<!--            </el-table-column>-->
            <el-table-column
                prop="num"
                label="销量(件)">
            </el-table-column>
            <el-table-column
                prop="money"
                label="销售额(元)">
            </el-table-column>
          </el-table>
<!--          <el-pagination background layout="prev, pager, next" :total="page.total" :page-size="page.size" :current-page.sync="page.currentPage" @current-change="handleCurrentChange"></el-pagination>-->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts';
import {takeOutGood,goodExport} from '@/api/statistics';
import {changeDate} from '@/utils/index';
import {mapState} from 'vuex';
import index from "@/api";

export default {
  mounted() {
    this.bus.$emit('loading', true);
    this.init();
    window.addEventListener('resize', this.initchart);
  },
  computed:{
    ...mapState(['storeId'])
  },
  data() {
    return {
      formInline: {
        type: '1',
        timeType: '1',
        time: [new Date(), new Date()],
        Mtime: ''
      },
      lyOptions: [
        {
          value: '1',
          label: '按商品销量排行'
        },
        {
          value: '2',
          label: '按商品销售额排行'
        }
      ],
      activeName1: 'wmspgk',
      selectData:'',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.selectData = minDate.getTime()
          if (maxDate) {
            this.selectData = ''
          }
        },
        disabledDate: (time) => {
          if (!this.isNull(this.selectData)) {
            var date = new Date(this.selectData)
            return date.getMonth() > new Date(time).getMonth() || date.getMonth() < new Date(time).getMonth()
          } else {
            return false
          }
        }
      },
      page: {
        total: 0,
        size: 20,
        currentPage: 1
      },
      zhData: {},
      jeData: {},
      jyData: {},
      form: {
        shopValue: '',
        timeType: '1',
        time: [new Date(), new Date()],
        Mtime: ''
      },
      options: [
        {
          value: '1',
          label: '全部'
        }
      ],
      tableData: [],
      tableData2: [],
      echarts1_option: {
        color: ['#4284ED', '#42CCF0'],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['营业额']
        },
        grid: {
          left: '3%',
          right: '5%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          // 去除坐标轴上的刻度线
          axisTick: {
            show: false,
            lineStyle: {
              color: '#ccc',
              type: 'dashed'
            }
          },
          // x轴的字体样式
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: '12'
            }
          },
          // x轴的颜色和宽度
          axisLine: {
            lineStyle: {
              color: '#4ECB73',
              width: 2 //这里是坐标轴的宽度,可以去掉
            }
          },
          data: []
        },
        yAxis: {
          type: 'value',
          axisTick: {
            //y轴刻度线
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: '12'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dotted',
              color: '#DDDDDD'
            },
            show: true
          }
        },
        series: [
          {
            name: '营业额',
            type: 'bar',
            data: []
          }
        ]
      },
      echarts4_option: {
        color: ['#4284ED', '#42CCF0', '#1890FF', '#2FC25B', '#4284ED'],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['营业总额', '预计收入', '有效订单', '无效订单']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          // 去除坐标轴上的刻度线
          axisTick: {
            show: false,
            lineStyle: {
              color: '#ccc',
              type: 'dashed'
            }
          },
          // x轴的字体样式
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: '12'
            }
          },
          // x轴的颜色和宽度
          axisLine: {
            lineStyle: {
              color: '#f7f7f7',
              width: 2 //这里是坐标轴的宽度,可以去掉
            }
          },
          data: []
        },
        yAxis: {
          type: 'value',
          axisTick: {
            //y轴刻度线
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: '12'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dotted',
              color: '#DDDDDD'
            },
            show: true
          }
        },
        series: [
          {
            name: '营业总额',
            type: 'line',
            stack: '总量',
            smooth: true,
            data: []
          },
          {
            name: '预计收入',
            type: 'line',
            stack: '总量',
            smooth: true,
            data: []
          },
          {
            name: '有效订单',
            type: 'line',
            stack: '总量',
            smooth: true,
            data: []
          },
          {
            name: '无效订单',
            type: 'line',
            stack: '总量',
            smooth: true,
            data: []
          },
        ]
      },
      echarts32_option: {
        color: ['#5654F5', '#4CA8FF', '#4EC478', '#FBA33F', '#EBA675'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: 0,
          data: ['微信小程序', '支付宝小程序']
        },
        series: [
          {
            name: '支付金额',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 35.00, name: '微信小程序'},
              {value: 20.00, name: '支付宝小程序'},
            ],
          }
        ]
      },
      echarts33_option: {
        color: ['#5654F5', '#4CA8FF', '#4EC478', '#FBA33F', '#EBA675'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: 0,
          data: ['外卖订单', '外卖自提订单',]
        },
        series: [
          {
            name: '支付金额',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 35.00, name: '外卖订单'},
              {value: 20.00, name: '外卖自提订单'},
            ],
          }
        ]
      },
      echarts34_option: {
        color: ['#5654F5', '#4CA8FF', '#4EC478', '#FBA33F', '#EBA675'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: 0,
          data: ['微信支付', '支付宝支付', '余额支付', '货到付款']
        },
        series: [
          {
            name: '支付金额',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 35.00, name: '微信支付'},
              {value: 20.00, name: '支付宝支付'},
              {value: 20.00, name: '余额支付'},
              {value: 20.00, name: '货到付款'},
            ],
          }
        ]
      },
    };
  },
  methods: {
    init() {
      this.realRecord();
    },
    initchart() {
      let myChart2 = echarts.init(document.getElementById('zhentiEch'));
      myChart2.resize();
    },
    async realRecord() {
      var params = {
        // page: this.page.currentPage,
        storeId: this.storeId,
        type: this.formInline.type,
        timeType: this.formInline.timeType,
        startTime: this.formInline.timeType == '4' && this.formInline.time ? changeDate(this.formInline.time[0]).substr(0,10) : '',
        endTime: this.formInline.timeType == '4' && this.formInline.time ? changeDate(this.formInline.time[1]).substr(0,10) : '',
      };
      const {data ,count} = await takeOutGood(params);
      if (data) {
        this.jeData = data;
        this.tableData2 = data.payTop;
        // this.page.total = count;
        this.bus.$emit('loading', false);
      }
    },
    mainEch32() {
      let myChart = echarts.init(document.getElementById('mainEch32'))
      myChart.setOption(this.echarts32_option, true)
    },
    mainEch33() {
      let myChart = echarts.init(document.getElementById('mainEch33'))
      myChart.setOption(this.echarts33_option, true)
    },
    mainEch34() {
      let myChart = echarts.init(document.getElementById('mainEch34'))
      myChart.setOption(this.echarts34_option, true)
    },
    selectType(){
      this.init()
    },
    isNull(value) {
      if (value) {
        return false
      }
      return true
    },
    changeStore() {
      this.realRecord();
    },
    handleCurrentChange(val) {
      this.page.currentPage = val;
      this.realRecord();
    },
    handleTabClick() {
      if (this.activeName1 == 'wmddgk') {
        this.$router.push(`/storeoutsurvey1`);
      } else if (this.activeName1 == 'wmzfgk') {
        this.$router.push(`/storeoutsurvey2`);
      } else if (this.activeName1 == 'wmspgk') {
        this.$router.push(`/storeoutsurvey3`);
      }
    },
    handelExport() {
      let startTime = this.formInline.time ? changeDate(this.formInline.time[0]).substring(0, 10) : '';
      let endTime = this.formInline.time ? changeDate(this.formInline.time[1]).substring(0, 10) : '';
      let backendPath = index.backendPath;
      return backendPath + 'channel/financial/good-export?type=' + this.formInline.type + '&goodsType=1' + '&timeType=' + this.formInline.timeType +'&storeId=' + this.storeId + '&startTime=' +startTime + '&endTime=' +endTime;
    }
  }
};
</script>
<style lang="scss" scoped>
.title6 {
  color: #666;
  font-size: 14px;
}

.title35 {
  color: #353535;
}

.tongji_icon {
  width: 40px;
  height: 40px;
  font-size: 20px;
}
</style>
